<!-- <template>
    <ContentBase>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">时间(日，周，月)</th>
                    <th scope="col">充电桩编号</th>
                    <th scope="col">累计充电次数</th>
                    <th scope="col">累计充电时长</th>
                    <th scope="col">累计充电量</th>
                    <th scope="col">累计充电费用</th>
                    <th scope="col">累计服务费用</th>
                    <th scope="col">累计总费用</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>1</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                    <td>Mark</td>
                    <td>Otto</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td colspan="2">Larry the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </ContentBase>
</template> -->
  
<template>
    <ContentBase>
        <div class="report-container">
            <div class="report-filters">
                <div class="filter-group">
                    <label for="pileSelect">选择充电桩：</label>
                    <select id="pileSelect" v-model="selectedPile" class="form-select">
                        <option value="">请选择充电桩</option>
                        <option v-for="pile in pileList" :key="pile" :value="pile">{{ pile }}</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="dateSelect">选择日期：</label>
                    <input type="date" id="dateSelect" v-model="selectedDate" class="form-control">
                </div>
                <button @click="fetchReport" class="btn btn-primary">
                    <i class="fas fa-search"></i> 查询
                </button>
            </div>

            <div v-if="report" class="report-content">
                <div class="report-header">
                    <h3>充电桩 {{ report.pileId }} 的日报表</h3>
                </div>
                <div class="report-stats">
                    <div class="stat-card">
                        <i class="fas fa-bolt"></i>
                        <div class="stat-info">
                            <span class="stat-label">累计充电次数</span>
                            <span class="stat-value">{{ report.totalChargeCount }} 次</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <i class="fas fa-clock"></i>
                        <div class="stat-info">
                            <span class="stat-label">累计充电时长</span>
                            <span class="stat-value">{{ report.totalChargeDuration }} 秒</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <i class="fas fa-yen-sign"></i>
                        <div class="stat-info">
                            <span class="stat-label">充电费用</span>
                            <span class="stat-value">¥{{ report.totalChargeFee.toFixed(2) }}</span>
                        </div>
                    </div>
                    <div class="stat-card">
                        <i class="fas fa-hand-holding-usd"></i>
                        <div class="stat-info">
                            <span class="stat-label">服务费用</span>
                            <span class="stat-value">¥{{ report.totalServiceFee.toFixed(2) }}</span>
                        </div>
                    </div>
                    <div class="stat-card total">
                        <i class="fas fa-money-bill-wave"></i>
                        <div class="stat-info">
                            <span class="stat-label">总费用</span>
                            <span class="stat-value">¥{{ report.totalFee.toFixed(2) }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else-if="hasSearched" class="no-data">
                <i class="fas fa-file-alt"></i>
                <p>暂无报表数据</p>
            </div>
        </div>
    </ContentBase>
</template>

<script>
import ContentBase from '@/components/ContentBase.vue';
import $ from 'jquery';
import { ref } from 'vue';

export default {
    name: 'ReportDisplayView',
    components: {
        ContentBase,
    },
    setup() {
        const pileList = ["慢桩A", "慢桩B", "慢桩C", "快桩A", "快桩B"];
        const selectedPile = ref('');
        const selectedDate = ref(new Date().toISOString().split('T')[0]);
        const report = ref(null);
        const hasSearched = ref(false);

        const fetchReport = () => {
            if (!selectedPile.value || !selectedDate.value) {
                alert('请选择充电桩和日期');
                return;
            }

            const date = new Date(selectedDate.value);
            const year = date.getFullYear();
            const month = date.getMonth();
            const day = date.getDate();
            
            const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}T00:00:00`;

            $.ajax({
                url: process.env.VUE_APP_BACKEND_URL + '/admin/daily',
                type: "get",
                data: {
                    pileId: selectedPile.value,
                    date: dateStr
                },
                success(resp) {
                    if (resp.code === 0 && resp.data) {
                        report.value = resp.data;
                    } else {
                        alert(resp.message || '获取报表失败');
                        report.value = null;
                    }
                    hasSearched.value = true;
                },
                error() {
                    alert('获取报表失败');
                    report.value = null;
                    hasSearched.value = true;
                }
            });
        };

        const formatDate = (dateString) => {
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
            });
        };

        return {
            pileList,
            selectedPile,
            selectedDate,
            report,
            hasSearched,
            fetchReport,
            formatDate
        };
    }
}
</script>
  
<style scoped>
.report-container {
    padding: 1.5rem;
}

.report-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: flex-end;
}

.filter-group {
    flex: 1;
    max-width: 300px;
}

.filter-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #666;
}

.form-select, .form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
}

.btn-primary {
    padding: 0.5rem 1.5rem;
    background: var(--primary-color);
    border: none;
    border-radius: 8px;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}

.report-content {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.report-header {
    margin-bottom: 2rem;
    text-align: center;
}

.report-header h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.report-date {
    color: #666;
    margin: 0;
}

.report-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-card i {
    font-size: 2rem;
    color: var(--primary-color);
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
}

.stat-value {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
}

.stat-card.total {
    background: var(--primary-color);
    color: white;
}

.stat-card.total i,
.stat-card.total .stat-label,
.stat-card.total .stat-value {
    color: white;
}

.no-data {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.no-data i {
    font-size: 3rem;
    color: #ccc;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .report-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        max-width: none;
    }

    .report-stats {
        grid-template-columns: 1fr;
    }
}
</style>
  